<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue实现记事本的demo</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<div id="app">
    <div title="输入框">
        <input type="text" placeholder="请输入需要记笔记的内容" v-model="noteText" @keyup.enter="saveNoteText" />
    </div>
    <div titl="显示区" v-show="noteData.length > 0">
        <ul>
            <li v-for="(item, index) in noteData" @mouseover="mouseIn(index)" @mouseleave="mouseOut(index)">
                {{index}}. {{item}}
                <button @click="remove(index)" v-show="index == mouseInIndex">x</button>
            </li>
        </ul>
        <div title="统计信息">
            <p>共有: {{noteData.length}}条数据</p>
            <button v-on:click="clear">clear</button>
        </div>
    </div>
</div>
</body>
<script>

    let app1 = new Vue({
        el: '#app',
        data: {
            noteText: '',
            mouseInIndex: -1,
            noteData: []
        },
        methods: {
            remove: function (index) {
                //splice方法比较特殊, 第一个参数表示从哪个位置开始删除元素, 第二个参数为删除几个.
                this.noteData.splice(index, 1);
            },
            saveNoteText: function () {
                if(this.noteText === '') {
                    return;
                }
                this.noteData.push(this.noteText);
                this.noteText = '';
            },
            clear: function () {
                this.noteData = [];
            },
            mouseIn: function (index) {
                this.mouseInIndex = index;
            },
            mouseOut: function (index) {
                this.mouseInIndex = -1;
            }
        }
    });

</script>
</html>